From 360b516ef4efda1c3a9bb46f35b9c1dcaf9cff80 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 13 Nov 2014 18:31:18 +0100 Subject: [PATCH] Adwaita: overshoot styling --- gtk/resources/theme/Adwaita/_common.scss | 20 +++--- gtk/resources/theme/Adwaita/_drawing.scss | 71 +++++++++++++++++++ .../theme/Adwaita/gtk-contained-dark.css | 48 +++++++++---- gtk/resources/theme/Adwaita/gtk-contained.css | 48 +++++++++---- 4 files changed, 151 insertions(+), 36 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index c3d7457d1e..06d5c5240e 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -122,24 +122,20 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. .overshoot { &.top { - background: linear-gradient(to top, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8)); - background-size: auto 100px; - background-position: center 100%; + @include overshoot(top); + &:backdrop { @include overshoot(top, backdrop); } } &.bottom { - background: linear-gradient(to bottom, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8)); - background-size: auto 100px; - background-position: center 0%; + @include overshoot(bottom); + &:backdrop { @include overshoot(bottom, backdrop); } } &.left { - background: linear-gradient(to left, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8)); - background-size: 100px auto; - background-position: 100% center; + @include overshoot(left); + &:backdrop { @include overshoot(left, backdrop); } } &.right { - background: linear-gradient(to right, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8)); - background-size: 100px auto; - background-position: 0% center; + @include overshoot(right); + &:backdrop { @include overshoot(right, backdrop); } } } diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index 7cbbba825b..d9cdfb9200 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -498,3 +498,74 @@ inset 0 1px $hc; // top highlight } + +@mixin overshoot($p, $t:normal, $c:$borders_color) { +// +// overshoot +// +// $p: position +// $t: type +// $c: base color +// +// possible $p values: +// top, bottom, right, left +// +// possible $t values: +// normal, backdrop +// + + $_radial_gradient_length: 4%; + $_linear_gradient_length: 70%; + + $_position: center top; + $_linear_gradient_direction: to bottom; + $_radial_gradient_size: 100% $_radial_gradient_length; + $_linear_gradient_size: 100% $_linear_gradient_length; + + @if $p==bottom { + $_position: center bottom; + $_linear_gradient_direction: to top; + } + + @else if $p==right { + $_position: right center; + $_linear_gradient_direction: to left; + $_radial_gradient_size: $_radial_gradient_length 100%; + $_linear_gradient_size: $_linear_gradient_length 100%; + } + + @else if $p==left { + $_position: left center; + $_linear_gradient_direction: to right; + $_radial_gradient_size: $_radial_gradient_length 100%; + $_linear_gradient_size: $_linear_gradient_length 100%; + } + + $_color: $c; + + @if $t==backdrop { + $_color: if($c==$borders_color, $backdrop_borders_color, $c); + } + + $_radial_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, 0.5, + to($_color), + to(transparentize($_color, 1))); + + $_linear_gradient: linear-gradient($_linear_gradient_direction, transparentize($_color, 0.85), + transparentize($_color, 1)); + + @if $t==normal { + background-image: $_radial_gradient, $_linear_gradient; + background-size: $_radial_gradient_size, $_linear_gradient_size; + } + + @else if $t==backdrop { + background-image: $_radial_gradient; + background-size: $_radial_gradient_size; + } + + background-repeat: no-repeat; + background-position: $_position; +} diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index d910b87f7c..439306ebbb 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -74,21 +74,45 @@ background-color: rgba(33, 93, 156, 0.2); } .overshoot.top { - background: linear-gradient(to top, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2)); - background-size: auto 100px; - background-position: center 100%; } + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to bottom, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0)); + background-size: 100% 4%, 100% 70%; + background-repeat: no-repeat; + background-position: center top; } + .overshoot.top:backdrop { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0))); + background-size: 100% 4%; + background-repeat: no-repeat; + background-position: center top; } .overshoot.bottom { - background: linear-gradient(to bottom, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2)); - background-size: auto 100px; - background-position: center 0%; } + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to top, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0)); + background-size: 100% 4%, 100% 70%; + background-repeat: no-repeat; + background-position: center bottom; } + .overshoot.bottom:backdrop { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0))); + background-size: 100% 4%; + background-repeat: no-repeat; + background-position: center bottom; } .overshoot.left { - background: linear-gradient(to left, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2)); - background-size: 100px auto; - background-position: 100% center; } + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to right, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0)); + background-size: 4% 100%, 70% 100%; + background-repeat: no-repeat; + background-position: left center; } + .overshoot.left:backdrop { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0))); + background-size: 4% 100%; + background-repeat: no-repeat; + background-position: left center; } .overshoot.right { - background: linear-gradient(to right, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2)); - background-size: 100px auto; - background-position: 0% center; } + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to left, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0)); + background-size: 4% 100%, 70% 100%; + background-repeat: no-repeat; + background-position: right center; } + .overshoot.right:backdrop { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0))); + background-size: 4% 100%; + background-repeat: no-repeat; + background-position: right center; } .label.separator, GtkPlacesSidebar.sidebar .view .label.separator { color: #eeeeec; } diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index fea5d57920..8515873395 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -74,21 +74,45 @@ background-color: rgba(74, 144, 217, 0.2); } .overshoot.top { - background: linear-gradient(to top, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2)); - background-size: auto 100px; - background-position: center 100%; } + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to bottom, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0)); + background-size: 100% 4%, 100% 70%; + background-repeat: no-repeat; + background-position: center top; } + .overshoot.top:backdrop { + background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0))); + background-size: 100% 4%; + background-repeat: no-repeat; + background-position: center top; } .overshoot.bottom { - background: linear-gradient(to bottom, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2)); - background-size: auto 100px; - background-position: center 0%; } + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to top, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0)); + background-size: 100% 4%, 100% 70%; + background-repeat: no-repeat; + background-position: center bottom; } + .overshoot.bottom:backdrop { + background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0))); + background-size: 100% 4%; + background-repeat: no-repeat; + background-position: center bottom; } .overshoot.left { - background: linear-gradient(to left, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2)); - background-size: 100px auto; - background-position: 100% center; } + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to right, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0)); + background-size: 4% 100%, 70% 100%; + background-repeat: no-repeat; + background-position: left center; } + .overshoot.left:backdrop { + background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0))); + background-size: 4% 100%; + background-repeat: no-repeat; + background-position: left center; } .overshoot.right { - background: linear-gradient(to right, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2)); - background-size: 100px auto; - background-position: 0% center; } + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to left, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0)); + background-size: 4% 100%, 70% 100%; + background-repeat: no-repeat; + background-position: right center; } + .overshoot.right:backdrop { + background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0))); + background-size: 4% 100%; + background-repeat: no-repeat; + background-position: right center; } .label.separator, GtkPlacesSidebar.sidebar .view .label.separator { color: #2e3436; } -- 2.30.2